<template>
  <div class="task-detail">
    <h1 class="title">任务详情</h1>
    <ul class="task-info">
      <li class="task-info-item" v-for="item in taskInfoList" :key="item.key">
        <label>{{ item.desc }}：</label>
        <span>{{
          item.render
            ? item.render(task.taskInfo?.[item.key])
            : task.taskInfo?.[item?.key] || '-'
        }}</span>
      </li>
      <template v-if="task.taskInfo.retrain_info">
        <li class="task-info-item" v-for="item in retrainInfo" :key="item.key">
          <label>{{ item.desc }}：</label>
          <span>{{
            item.render
              ? item.render(task.taskInfo?.retrain_info?.[item.key])
              : task.taskInfo?.retrain_info?.[item?.key] || '-'
          }}</span>
        </li>
      </template>
      <li class="task-info-item">
        <label>作业描述：</label>
        <span>{{ task.taskInfo?.task_description || '-' }}</span>
      </li>
    </ul>
    <template v-if="task.questionInfo.length">
      <AssignTopic
        v-for="(question, index) in task.questionInfo"
        :topic-data="props.isPending ? question : question.question_detail"
        :key="index"
        :index="index + 1"
      />
    </template>
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import { TaskTypeMap } from '@/stores/task'
import { subjectMap, gradeMap } from '@/constants'
import { getTaskDetail } from '@/apis/assignment/index.js'
import dayjs from 'dayjs'
import { returnQUesTypeOptions } from '@/views/assignment/util.js'
import AssignTopic from './AssignTopic.vue'

const taskInfoList = [
  {
    desc: '作业标题',
    key: 'task_name'
  },
  {
    desc: '作业类型',
    key: 'task_type',
    render: val => {
      return TaskTypeMap[val]?.title || '-'
    }
  },
  {
    desc: '接收班级',
    key: 'class_info',
    render: val => {
      return (val || []).map(item => item.name).join(',') || '-'
    }
  },
  {
    desc: '已选题目',
    key: 'total_question',
    render: val => {
      return `${val === 0 || val > 0 ? val + '道' : '-'}`
    }
  },
  {
    desc: '学科',
    key: 'subject_id',
    render: () => {
      return `${gradeMap[task.value.taskInfo.stage] || '-'}${subjectMap[task.value.taskInfo.subject_id] || ''}`
    }
  },
  {
    desc: '发布时间',
    key: 'release_time',
    render: val => {
      if (!props.isPending && val) {
        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
      }
      return '-'
    }
  },
  {
    desc: '截止时间',
    key: 'deadline',
    render: val => {
      if (!props.isPending && val) {
        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
      }
      return '-'
    }
  },
  {
    desc: '答案公布',
    key: 'answer_check_time',
    render: val => {
      if (!props.isPending && val) {
        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
      }
      return '提交后见'
    }
  }
]

const retrainInfo = [
  {
    desc: '重练时间',
    key: 'retrain_time',
    render: val => {
      if (val) {
        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
      }
      return '-'
    }
  },
  {
    desc: '重练题型',
    key: 'question_type',
    render: val => returnQUesTypeOptions[val]?.label || '-'
  }
]
const props = defineProps({
  taskId: {
    required: true
  },
  classSelect: {
    required: false
  },
  isPending: {
    default: false
  }
})
const task = ref({
  questionInfo: [],
  taskInfo: {}
})

const getData = async () => {
  const res = await getTaskDetail({
    task_id: props.taskId,
    class_id: props.classSelect?.value,
    class_type: props.classSelect?.class_type,
    type: props.isPending ? 2 : 1
  })
  task.value.taskInfo = res.data?.task_info || {}
  task.value.questionInfo = res.data?.question_info || []
}

watchEffect(() => {
  getData()
})
</script>
<style lang="less" scoped>
.task-detail {
  background-color: #fff;
  padding: 24px;

  .title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #f5f5f3;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .task-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;

    .task-info-item {
      font-size: 14px;
    }
  }
}
</style>
